<template>
  <div class="logins">
    <!--头部-->
    <headhtml @forgetPwd="forgetPwd" class="ipc-class"></headhtml>
    <!--黑客-->
    <div class="heike ipc-class   font-left">
      <canvas width="500" height="500" ref="q" id="q"></canvas>
    </div>
    <!--登陆-->
    <div class="login-class " v-if="showDiv===0">
      <div class="login-info">
        <div class="info-div">
          <p class="icon iconfont">&#xe633;</p>
          <input type="text" name="name" maxlength="25" v-model="name" placeholder="请输入你的账号" id="name">
        </div>
        <div class="info-div">
          <p class="icon iconfont">&#xe61b;</p>
          <input type="password" name="password" v-model="password" maxlength="25" placeholder="请输入你的密码" id="password">
        </div>
        <div class="info-login">
          <div class="login-tips">{{tips}}</div>
          <div class=" hand-class" style="width: 100%;height: 50px">
            <div class="login-btn" @click="userLogin">立即登录</div>
            <div class="forget-pwd login-btn" @click="forgetPwd(1)">忘记密码</div>
          </div>
        </div>
      </div>
    </div>
    <!--忘记密码-->
    <div class="login-class " v-if="showDiv===1">
      <div class="login-info">
        <div class="info-div update-pwd ">
          <p class="icon iconfont">&#xe633;</p>
          <input type="text" name="forgetName" maxlength="25" v-model="forgetName" placeholder="请输入你的账号"
                 id="forgetName">
        </div>
        <div class="info-div update-pwd">
          <p class="icon iconfont">&#xe61b;</p>
          <input type="password" name="forgetPassword" v-model="forgetPassword" maxlength="25" placeholder="修改你的密码"
                 id="forgetPassword">
        </div>
        <div class="info-div update-pwd">
          <p class="icon iconfont">&#xe68a;</p>
          <input type="text" name="forgetCode" maxlength="4" v-model="forgetCode" placeholder="验证码" id="forgetCode">
        </div>
        <div class="info-login">
          <div class="login-tips">{{tips}}</div>
          <div class=" hand-class" style="width: 100%;height: 50px">
            <div class="login-btn" @click="userLogin">立即修改</div>
            <div v-if="isShow" class="forget-pwd login-btn" @click="getCode">{{count}}</div>
            <div v-if="!isShow" class="forget-pwd login-btn">{{count}}</div>
          </div>
        </div>
      </div>
    </div>
    <!--注册-->
    <div class="login-class " v-if="showDiv===2">
      <div class="login-info">
        <div class="info-div update-pwd ">
          <p class="icon iconfont">&#xe633;</p>
          <input type="text" name="registerName" maxlength="25" v-model="registerName" placeholder="请输入你的账号"
                 id="registerName">
        </div>
        <div class="info-div update-pwd">
          <p class="icon iconfont">&#xe61b;</p>
          <input type="password" name="registerPassword" v-model="registerPassword" maxlength="25" placeholder="请输入你的密码"
                 id="registerPassword">
        </div>
        <div class="info-div update-pwd">
          <p class="icon iconfont">&#xe68a;</p>
          <input type="text" name="registerCode" maxlength="4" v-model="registerCode" placeholder="验证码">
        </div>
        <div class="info-login">
          <div class="login-tips">{{tips}}</div>
          <div class=" hand-class" style="width: 100%;height: 50px">
            <div class="login-btn" @click="userLogin">立即注册</div>
            <div v-if="isShow" class="forget-pwd login-btn" @click="getCode">{{count}}</div>
            <div v-if="!isShow" class="forget-pwd login-btn">{{count}}</div>
          </div>
        </div>
      </div>
    </div>

    <!--备案-->
    <icpinfo class="ipc-class login-ipc"></icpinfo>


  </div>
</template>

<script>
  import headhtml from "../headhtml/headhtml"
  import icpinfo from "../icp/icpinfo"

  export default {
    name: "login",
    components: {
      icpinfo,
      headhtml
    },
    data() {
      return {
        showDiv: null,//0登陆，1修改密码，2注册
        tips: "请输入登录信息",//登录提示
        count: "验证码",
        name: null,//账号
        password: null,//密码d
        isShow: true,//显示获取验证码
        forgetName: null,
        forgetPassword: null,
        forgetCode: null,
        registerName: null,
        registerPassword: null,
        registerCode: null,
      }
    },
    methods: {
      /**
       * 用户登录
       */
      userLogin() {
        console.log( this.$refs.p)
        console.log("+")
        if (this.name === null || this.password === null) {
          this.tips = "账号密码或为空"
          console.log(this.tips)
          return
        }

        if (this.name !== null && this.password != null) {

          this.tips = "正在登录……"
          this.$router.push({path: "/index"});
        }

        console.log("++")

      },
      /**
       * 登录页加载
       */
      black() {
        let s = window.screen;
        let width = q.width = s.width;
        let height = q.height = s.height;
        let letters = Array(256).join(1).split('');
        let draw = function () {
          q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
          q.getContext('2d').fillRect(0, 0, width, height);
          q.getContext('2d').fillStyle = '#0F0';
          letters.map(function (y_pos, index) {
            let text = Math.floor(Math.random() * 10);
            let x_pos = index * 10;
            q.getContext('2d').fillText(text, x_pos, y_pos);
            letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0
              : y_pos + 10;
          });
        };
        setInterval(draw, 50);
      },
      /**
       * 获取验证码
       */
      getCode() {

        const TIME_COUNT = 60;
        this.count = TIME_COUNT;
        this.isShow = false;
        let times = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;

          } else {
            this.count = "重新获取";
            this.isShow = true;
            return

            /*
                          clearInterval(this.timer);
            */
          }
        }, 1000)

      },
      forgetPwd(type) {
        this.showDiv = type
      }


    },
    mounted() {

      this.showDiv = parseInt(this.$route.params.type)
      this.black()
    }
  }
</script>

<style scoped>
  .update-pwd > > > p, input {
    font-size: 20px;
    height: 50%;
    line-height: 30px;
  }

  .update-pwd {
    width: 100%;
    height: 20%;
  }

  .login-ipc {
    z-index: 1;
    position: fixed;
    width: 100%;
    bottom: 0;
  }

  .hand-class > > > div {

    font-size: 20px;
    margin-top: 5px;
  }

  .forget-pwd {
  }

  .info-login {
    width: 100%;
  }

  .login-btn:hover {
    background-color: #14d4ff;
  }

  .login-btn {
    width: 30%;
    font-size: 20px;
    border: solid 1px #51ebff;
    color: white;
    margin-left: 11%;
    margin-right: 8%;
    float: left;
    border-radius: 3px;

  }

  .login-tips {
    font-size: 23px;
    color: red;
    text-align: center;
    width: 60%;
    margin: 0 23%;
    margin-top: 2%;
  }

  .info-div {
    width: 100%;
    float: left;
    margin-top: 10px;
    margin-left: 20%;
    margin-right: 20%;
  }

  .info-div > > > p {
    color: white;
    width: 7%;
  }

  .info-div > > > input {
    background-color: transparent;
    border: solid 1px red;
    color: #7eff04;
    text-align: center;
    font-weight: bold;
    width: 50%;
  }

  .info-div > > > input, p {
    font-size: 25px;
    float: left;
    margin: 3% 1%;
    line-height: 50px;

  }

  .login-class {
    position: absolute;
    width: 100%;
  }

  .login-info {
    overflow: hidden;
    width: 30%;
    height: 250px;
    border: solid 1px yellow;
    color: black;
    z-index: 1;
    position: absolute;
    text-align: center;
    margin: 8% 35%;
  }

  .font-left {
    float: left;
  }

  * {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  a, img {
    border: 0;
  }

  .heike {
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
    overflow: hidden;
    width: 100%;
    /*text-align:center;*/
  }

  #q {
    width: 100%;
    height: 80%;
    position: absolute;
    z-index: 0;
    font-size: 25px;

  }

  .account-div img {
    margin-top: 25%;
    margin-bottom: 25%;
    height: 60%;
    width: 60%;
  }


</style>
